<template>
  <el-card>
    <el-tree
      ref="treeRef"
      :data="treeList"
      node-key="id"
      :props="defaultProps"
      icon-class=" "
      :default-expanded-keys="expandedkeys"
      :current-node-key="nodekey"
      @current-change="nodeCurrent"
    >
      <template #default="{ node, data }">
        <div>
          <i
            :class="{
              'el-icon-folder-add': !node.expanded && data.type !== 3,
              'el-icon-folder-remove': node.expanded && data.type !== 3,
              'el-icon-document-add': !node.expanded && data.type === 2,
              'el-icon-document-remove': node.expanded && data.type === 2,
            }"
            style="color: #419eff"
          />
          <span class="label-content">{{ node.label }}</span>
        </div>
      </template>
    </el-tree>
  </el-card>
</template>

<script>
// import treePage from "@/components/tree-page.vue";
import { getTreeListApi } from "@/api/organization-manage";
export default {
  name: "tree-page",
  data() {
    return {
      treeList: [],
      defaultProps: {
        label: "name",
        id: "id",
        children: "children",
      },
      expandedkeys: [],
      nodekey: "",
    };
  },
  methods: {
    async getTreeList() {
      const res = await getTreeListApi();
      // console.log(res);
      this.treeList = JSON.parse(res.data);
      // console.log(this.treeList);
      this.expandedkeys = [
        this.treeList[0].id,
        this.treeList[0].children[0].id,
      ];
      this.nodekey = this.treeList[0].children[0].children[0].id;
      this.$nextTick(() => {
        this.$refs.treeRef.setCurrentKey(this.nodekey); // 一定要加这个选中了否则样式没有出来
      });
    },
    // 选中节点
    nodeCurrent(data) {
      this.nodekey = data.id;
      this.getOrganizationInfo();
    },
    getOrganizationInfo() {
      this.$emit("getOrganizationInfo", this.nodekey);
    },
  },
  created() {
    this.getTreeList();
    this.getOrganizationInfo();
  },
};
</script>

<style lang="less" scoped>
.tree {
  height: auto;
  width: 224px;
  margin: 12px;
}
.el-tree {
  .el-tree-node {
    .el-tree-node__children {
      .el-tree-node__content {
        font-size: 14px;
        .label-content {
          font-size: 12px;
          color: #818693;
        }
      }
    }
  }
}
.label-content {
  font-size: 14px;
}
// hover样式
.el-tree-node__content:hover {
  .label-content {
    color: #e15536 !important;
  }
}
::v-deep .el-tree-node {
  margin: 8px 0;
}
.is-current {
  .el-tree-node__content {
    .label-content {
      background-color: #fff !important;
      color: #e15536 !important;
    }
  }
}
// 清除旋转
.el-tree ::v-deep .el-tree-node__expand-icon.expanded {
  -webkit-transform: rotate(0deg);
  transform: rotate(0deg);
}
// 展开收起图标
// ::v-deep .el-tree {
//   .el-tree-node {
//     .el-tree-node__content {
//       .el-tree-node__expand-icon::before {
//         content: "";
//         display: inline-block;
//         width: 14px;
//         height: 14px;
//         background: url("~@/icons/iconImg/treeclose.png") no-repeat;
//         background-size: 100% 100%;
//         vertical-align: top;
//       }
//     }
//   }
// }
// ::v-deep .el-tree {
//   .el-tree-node {
//     .el-tree-node__content {
//       .expanded.el-tree-node__expand-icon::before {
//         content: "";
//         display: inline-block;
//         width: 14px;
//         height: 14px;
//         background: url("~@/icons/iconImg/treeopen.png") no-repeat;
//         background-size: 100% 100%;
//         vertical-align: top;
//       }
//     }
//   }
// }
// ::v-deep .el-tree {
//   .el-tree-node {
//     .el-tree-node__children {
//       .el-tree-node {
//         .el-tree-node__content {
//           .el-tree-node__expand-icon::before {
//             content: "";
//             display: inline-block;
//             width: 14px;
//             height: 14px;
//             background: url("~@/icons/iconImg/zankai.png") no-repeat;
//             background-size: 100% 100%;
//             vertical-align: top;
//           }
//         }
//       }
//     }
//   }
// }
// ::v-deep .el-tree {
//   .el-tree-node {
//     .el-tree-node__children {
//       .el-tree-node {
//         .el-tree-node__content {
//           .expanded.el-tree-node__expand-icon::before {
//             content: "";
//             display: inline-block;
//             width: 14px;
//             height: 14px;
//             background: url("~@/icons/iconImg/shouqi.png") no-repeat;
//             background-size: 100% 100%;
//             vertical-align: top;
//           }
//         }
//       }
//     }
//   }
// }
// 显示竖线
::v-deep .el-tree .el-tree-node .el-tree-node__children .is-focusable::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 10px;
  border-left: 1px solid #e5e7ec;
  height: 100%;
  z-index: 10;
}
::v-deep .el-tree > .el-tree-node .el-tree-node__children {
  position: relative;
}
::v-deep
  .el-tree
  .el-tree-node
  .el-tree-node__children
  .is-focusable
  .el-tree-node__children
  .is-focusable::before {
  content: "";
  display: inline-block;
  position: absolute;
  left: 30px;
  border-left: 1px solid #e5e7ec;
  height: calc(100% + 3px);
}
</style>
